/**
 * Copyright (c) 2018-present, Chen Guodong
 * All rights reserved.
 *
 * @flow
 */


<template>
  <section class="content">
    <Header title="发现"></Header>
    <div class="main" id="sticky_box">
      <div>
        <div class="main_header">
          <img
            :src="require('../../assets/img/news/bg_01.png')"
            style="width: 100%; height: 100%;"
            alt="重要通知"
            @click="goNoticeList"
          >
          <div class="import-item" v-for="(item, index) in importList" :key="index" @click="goNoticeList">
            <div class="left">{{item.title}}</div>
            <div class="right">
              <i class="iconfont icon-previewright"></i>
            </div>
          </div>
        </div>
        <!-- <div class="space" v-if="showSpace">间隔</div> -->
        <div class="title_box">
          <sticky
            class="title"
            ref="sticky"
            scroll-box="sticky_box"
            :offset="46"
            :check-sticky-support="false"
            :disabled="disabled"
          >考试咨询</sticky>
        </div>
        <ul ref="mescroll" class="mescroll" id="dataList">
          <li class="item" v-for="(item,index) in infoList" :key="index" @click="goNewsDetail(item.id)">
            <div class="left">
              <p class="title">{{item.title}}</p>
              <p class="footer">
                <b class="red">{{item.viewed}}阅读</b>
                <b class="date">{{item.updateTime}}</b>
              </p>
            </div>
            <div class="right">
              <img :src="require('../../assets/img/home/bg_01.jpg')" alt>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
import Header from "../../components/Header/Header";
import MeScroll from "mescroll.js";
import moment from 'moment';
import { Sticky } from "vux";
import { reqNewsList, reqNewsListTop } from "../../api/index.js";

export default {
  data() {
    return {
      showSpace: false,
      disabled:
        typeof navigator !== "undefined" &&
        /iphone/i.test(navigator.userAgent) &&
        /ucbrowser/i.test(navigator.userAgent),
      importList: [],
      infoList: []
    };
  },
  mounted() {
    this.initData();
    self = this;
    self.mescroll = new MeScroll(self.$refs.mescroll, {
      down: {
        auto: true,
        callback: self.downCallback,
        textInOffset: "下拉刷新",
        textOutOffset: "松开立即刷新",
        textLoading: `<p>正在加载数据中...</p><p>最后更新: 今天${moment().format(
          "HH:mm"
        )}</p>`
      },
      up: {
        auto: false,
        page: {
          num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10 // 每页数据的数量
        },
        callback: self.upCallback, //上拉回调
        isBounce: false, //此处禁止ios回弹,
        htmlNodata:
          "<p style='text-align: center; color: #ccc; font-size: 12px; padding: 10px;'>-- 没有更多数据了... --</p>",
        empty: {
          //配置列表无任何数据的提示
          warpId: "dataList",
          tip:
            "<p style='text-align: center; color: #ccc; font-size: 12px; padding: 10px;'>亲,暂无相关数据哦~</p>"
        }
      }
    });
  },
  methods: {
    // 初始化重要通知的置顶数据
    async initData() {
      let result = await reqNewsListTop({
        categoryId: 1,
        listRows: 1,
        isTop: 1
      });
      console.log("result", result);
      if (result.code === 1) {
        this.importList = result.data.items;
      } else {
        this.$vux.toast.show(`初始化重要信息失败:${result.msg}`);
      }
    },
    // 下拉刷新
    async downCallback(mescroll) {
      const result = await reqNewsList({
        categoryId: 2,
        pageIndex: 1,
        pageSize: 10
      });
      if (result.code === 1) {
        this.infoList = result.data.items;
        this.$nextTick(() => {
          mescroll.endSuccess(result.data.total);
        });
      } else {
        this.$vux.toast.show(`获取免费列表失败:${result.msg}`);
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    // 上拉加载
    async upCallback(page, mescroll) {
      const result = await reqNewsList({
        categoryId: 2,
        pageIndex: page.num,
        pageSize: page.size
      });
      if (result.code === 1) {
        const arr = result.data.items || [];
        this.infoList = this.infoList.concat(arr);
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          mescroll.endSuccess(arr.length);
        });
      } else {
        this.$nextTick(() => {
          mescroll.endErr();
        });
      }
    },
    goNewsDetail(data) {
      this.$router.push({ path: "/newsDetail", query: {id: data, title: 1} });
    },
    goNoticeList(){
      this.$router.push({ path: "/noticeList"});
    },
    spaceChange() {
      this.showSpace = !this.showSpace;
      this.$nextTick(() => {
        this.$refs.sticky.bindSticky();
      });
    }
  },
  components: {
    Header,
    Sticky
  }
};
</script>

<style lang='less' scoped>
@import "../../util/theme.less";

.content {
  .be-full();
}

.main {
  width: 100%;
  height: calc(~"100% - 96px");
  overflow: auto;
}

.main_header {
  width: 100%;
  .mix-flex-center();
  flex-direction: column;
  font-size: 20px;
  color: @red;
  .import-item {
    font-size: 1rem;
    width: 100%;
    text-align: left;
    color: @font-primary;
    padding: 10px;
    .mix-flex-center();
    background: @white;
    border-top: 1px solid @border-base;
    .left {
      flex: 1;
      .mix-text-overflow();
      justify-content: flex-start;
    }
    .right {
      flex: 0 0 20px;
      .mix-flex-center();
      i {
        color: @font-secondary;
      }
    }
  }
}

.title_box {
  height: 44px;
  .title {
    height: 44px;
    line-height: 44px;
    background: #eee;
    font-size: 16px;
    padding: 0 10px;
  }
}

.space-btn {
  padding: 5px 0;
  margin: 10px;
  text-align: center;
  border: 1px red solid;
}

.space {
  padding: 30px 0;
  margin: 10px;
  text-align: center;
  border: 1px green solid;
}

// item样式
.item {
  width: 100%;
  height: 90px;
  padding: 10px;
  background: @white;
  .mix-flex-center();
  border-bottom: 1px solid @border-base;
  .left {
    flex: 14;
    position: relative;
    height: 100%;
    margin-right: 15px;
    .title {
      font-size: 14px;
    }
    .footer {
      position: absolute;
      bottom: 0;
      font-size: 12px;
      color: @font-secondary;
      width: 100%;
      .read {
        float: left;
      }
      .date {
        float: right;
      }
    }
  }
  .right {
    flex: 7;
    position: relative;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 5px;
    }
  }
}
</style>
